<template>
    <div class="liebiao">
       <div class="kapian" v-for="item in list" :key="item.id" >
         <div class="tupian" @click = "gotodetail(item.tradeItemId,item.type)"><img :src="item.imga" alt=""></div>
         <div class="biaoti"><h2>{{ item.title }}</h2></div>
         <div class="jifeng">{{ item.cfav }}积分</div>
         <div class="shuliang" v-show="show" @click="changesl(item.id)"> x1</div>
         <div class="shuliang" v-show="!show" @click="removeid(item.id)">
              <div class="jian">-</div>
              <div class="shu">1</div>
         </div>
         <div class="duihuang" @click="tzdh(item.cfav)">立即兑换</div>
       </div>
    </div>
</template>
  
<script>
import { mapState,mapMutations,mapActions,mapGetters } from 'vuex';

export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: 'shopping',
    components: { },
    data () {
      return {
        show:true,
        list:[]
      }
    },
    created() {
      this.asynczx();      
      this.list = JSON.parse(localStorage.getItem("bdlist"));
      this.changegwc(this.list.length);      
      console.log(this.list);
    },
    computed: {
      ...mapState({
        firstzx:state => state.gwc.firstzx,
        // gwcvalue:state => state.gwc.gwcvalue,
        // gscvalue:state => state.gsc.gscvalue,
        // isLogined:state=>state.loginzt.isLogined,
        // userInfo:state=>state.userinfo.userInfo, 
      }),
    },
    methods: {
      ...mapMutations({
      //  changeisshowlogin:"login/changeisshowlogin",
      //  // 登录状态
      //  changeIsLogined:"loginzt/changeIsLogined",
          removeitem:"gwc/removeitem",
          changegwc:"gwc/changegwc",
          notfirstzx:"gwc/notfirstzx"
    }),
    ...mapActions({
        // // 登录提示语是否显示
        // asyncChangeIsShowToast:"logintoast/asyncChangeIsShowToast",
        // 请求购物车的接口
        asyncshopping:"gwc/shopping",
        
      }),
      tzdh(jifeng){
        this.$router.push('/duihuang/' + jifeng);
      },
      // 仅执行一次接口数据
      asynczx(){
        if(this.firstzx){
          this.asyncshopping();
          this.list = JSON.parse(localStorage.getItem("bdlist"));
          this.changegwc(this.list.length); 
          this.notfirstzx();
        }else{
          this.notfirstzx();
        }
      },
      removeid( id ){
        this.removeitem( id );
        this.show = true;
        // 更新本地数组
        this.list = JSON.parse(localStorage.getItem("bdlist"));
        this.changegwc(this.list.length);
        console.log(this.show);
      },
      // 跳转到详情页
      gotodetail(itemid,type){
        const id  = itemid;
        const index = type;
        this.$router.push('/detail/' + index + '/' + id + '/')
      },
      changesl(id ){
        if( id ){
          this.show = false;
        }else{
          this.show = true;
        }
           
      }
    }
}
</script>
  
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang = "less" scoped>
.liebiao{
   margin:0 auto;
   margin-top: 110px;
   width: 860px;
   .kapian{
      cursor: pointer;
      text-align:left;
      width: 800px;
      height: 150px;
      background-color: rgb(245, 245, 245);
      margin-top: 20px;
      position: relative;
      border-radius:15px;
      box-shadow: 0 0 10px #ccc;
      .tupian{
        width:100px;
        height: 100px;
        margin: 25px;
        background-color: aliceblue;
        float:left;
        img{
          width:100px;
          height: 100px;
        }
      }
      .biaoti{
        width:455px;
        height: 60px;
        margin-top: 25px;
        // background-color: yellow;
        position: absolute;
        left:150px;
      }
      .jifeng{
        position: absolute;
        left:150px;
        bottom: 25px;
        font-size: 18px;
      }
      .shuliang{
        padding: 6px;
        position: absolute;
        left:578px;
        bottom: 25px;
        .jian{
          float: left;
        }
        .shu{
          float: left;
        }
      }
      .duihuang{
        border: 1px solid black;
        padding: 10px;
        background-color: #856437;
        color: #fff;
        float:right;
        margin-right: 25px;
        margin-top: 50px;
      }
   }
}
</style>
  